<template>
    <div class="jd-logion">
        <Navbabbar title="注册页">
            <template>
            <span @click="$router.replace('/logion')">登陆</span>
            </template>
        </Navbabbar>

        <van-form @submit="onregister">
        <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
        v-model="repassword"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
        />

        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">注册</van-button>
        </div>
        </van-form>
    </div>
</template>
<script>
import { Form,Field ,Button,Toast } from 'vant';
import { Navbabbar,} from '@/components/';

export default {
    data(){
       return{
            password:'',
            username:'',
            repassword:''
       }
    },
    components:{
        [Form.name]:Form,
        [Field.name]:Field,
        [Button.name]:Button,
        Navbabbar
    },
    methods:{
        
        onregister(){
            // 判断两次密码是否一致
            if(this.password===this.repassword){
                const data = {
                username:this.username,
                password:this.password
            }

            this.$http.fetchregister(data).then(res=>{
                if(res){
                    Toast('注册成功');
                this.$router.push('/logion')
                }



                console.log(res);
                


            })

               
            }
        },
    
    }
    
}
</script>
<style lang="scss" scoped>
.jd-logion{
    padding-top: 2rem;
}

</style>